<!-- 
 Copyright (C), 2018, NanJu Tech. Co., Ltd.
 Author:       wunan
 Version:      1.0
 Date:         2018/10/6
 Description:  提成统计
 -->
 <template>

 <div>
		 <title-bar :title="'提成统计'" />
 <van-tabs :active="activeIndex" @click="handleTabClick" sticky style="margin-top: 46px;">
     <van-tab v-for="(tabItem, i) in tabItems" :key="i" :title="tabItem.title" >
         <div class="total_text"><span>{{totalCommission.toFixed(2)}}</span></div>
         <van-cell-group v-if="items.length > 0">
            <van-list v-model="loading" class="scroll-load" :finished="finished" :immediate-check="false" :offset="100" @load="loadMore">
                <van-cell v-for="item in items" :key="item.id">
                    <div slot="title">
                        <div><b>{{item.createTime}}</b></div>
                       <div style="color: gray; font-size: 12px;">{{item.productName + ' ' + (item.optionName || '')}}</div>
                    </div>
                    <div slot="right-icon" style="font-size: 12px;">
                        <div>数量：{{item.total}}</div>
                        <div>提成：<span class="commission_text"><span class="red">{{item.commission.toFixed(2)}}</span></span></div>
                    </div>
                </van-cell>
            </van-list>
         </van-cell-group>
     <is-empty v-if="isEmpty">没有找到符合条件的记录</is-empty>
     </van-tab>
 </van-tabs>
 </div>
 </template>
 
<script>
import {
  Tabs,
  Tab
} from 'vant';
import {
  COMMISSION_SUM
} from '@/api/user';
import loadMore from "@/vue/mixin/list-load-more";
import IsEmpty from "@/vue/components/is-empty/";
import TitleBar from '@/vue/components/title-bar/';
export default {
  mixins: [loadMore],
  data() {
    return {
      tabItems: [{
        title: '全部'
      }, {
        title: '今日',
        type: 0
      }, {
        title: '本周',
        type: 1
      }, {
        title: '本月',
        type: 2
      }],
      activeIndex: 0,
      shopId: this.getUser().id,
      totalCommission: 0
    }
  },

  created() {
    this.resetInit();
  },

  methods: {
    initData() {
      const type = this.tabItems[this.activeIndex].type;
      return this.$reqGet(
        COMMISSION_SUM, {
          shopId: this.shopId,
          type: type,
          offset: (this.pages.currPage - 1) * this.pages.perPage,
          limit: this.pages.perPage
        }, {
          hideLoading: true
        }
      ).then(res => {
        const {
          commissionTotal,  
          logs,
        } = res.data.data;
        this.totalCommission = commissionTotal;
        this.items.push(...logs.rows);
        return {
          pageCount: logs.rows.length,
          totalCount: logs.total
        };
      });
    },
    handleTabClick(index) {
        this.activeIndex = index;
        this.resetInit();
    },
  },

  components: {
    [Tabs.name]: Tabs,
    [Tab.name]: Tab,
    [IsEmpty.name]: IsEmpty,
		[TitleBar.name]: TitleBar
  }
}
</script>
<style lang="scss" scoped>
.total_text {
    font-size: 30px;
    color: white;
    padding: 10px;
    text-align: center;
    background-color: $green;
    ::before {
        content: '¥';
        font-size: 10px;
        margin-right: 5px;
    } 
}
.commission_text {
    font-size: 14px;
    ::before {
        content: '¥';
        font-size: 8px;
        margin-right: 3px;
    } 
}
</style>
